import React from 'react'
import style from './style.profile'
import util from '../../util'
import { Modal, Input, FileUpload, Address, Select, DateSelect, Button, ImgTxt, Link, TitleBar } from '../../ui-components'
import cx from 'classnames'

export default
class UserProfile extends React.Component {

	render() {
		const list = (this.props.profileFieldVOs || [])
			.filter(item => item.dataType === 1 )
			.filter(item => item.referenceName !== 'essentialInfo')
			.map(item => ({
				...item,
				children: this.props.profileFieldVOs.filter(v => v.containerId == item.profileFieldId)
			}))
      .filter(item => item.children.length)
		return (
			<div>
				<div className={style.list}>
					{
						list.map((item, i) => (
							<div key={i}>
								<h2>{ item.displayName }</h2>
								<div>
									{
										item.children.map((v, i) => {
											if (v.dataType == 5) {
												if (v.referenceName === "avatarUrl") {
                          return null
												}
												return (
													<div key={i} className={style.item}>
														<label>{ v.displayName }:</label>
														<span>{ v.dataValue }</span>
													</div>
												)
                      } else if(v.dataType == 10) {
                        return (
													<div key={i} className={style.item}>
														<label>{ v.displayName }:</label>
                            <span>{ util.find(v.typeSpec.pickOptions, item => item.pickOptionId == v.dataValue).optionValue || '' }</span>
													</div>
                        )
                      } else if (v.dataType == 7) {
                        return (
                          <div key={i} className={cx(style.item, style.editor)}>
														<label>{ v.displayName }:</label>
                            <div dangerouslySetInnerHTML={{__html: v.dataValue}} />
                          </div>
                        )
                      } else if (v.dataType == 4) {
												return (
													<div key={i} className={style.item}>
														<label>{ v.displayName }:</label>
														<span>{ util.time(v.dataValue, '-') }</span>
													</div>
												)
                      } else if (v.dataType == 6) {
												return (
													<div key={i} className={style.item}>
														<label>{ v.displayName }:</label>
														<span>{ v.dataValue }</span>
													</div>
												)
                      } else if (v.dataType == 8) {
                        const { detail } = v.dataValue? JSON.parse(v.dataValue): {}
												return (
													<div key={i} className={style.item}>
														<label>{ v.displayName }:</label>
														<span>{ detail || '' }</span>
													</div>
												)
                      }
											return null
										})
									}
								</div>
							</div>
						))
					}
				</div>
			</div>
		)
	}
}
